<template>
  <view class="container">
    <view class="login-box">
      <text class="title">用户登录</text>

      <!-- 登录方式切换 -->
      <view class="switch-box">
        <text 
          :class="['switch-item', loginType === 'username' ? 'active' : '']" 
          @click="loginType = 'username'"
        >
          用户名登录
        </text>
        <text 
          :class="['switch-item', loginType === 'phone' ? 'active' : '']" 
          @click="loginType = 'phone'"
        >
          手机号登录
        </text>
      </view>

      <form @submit="formSubmit">
        <view class="form-item">
          <input 
            v-if="loginType === 'username'" 
            class="input" 
            type="text" 
            placeholder="请输入用户名" 
            v-model="username"
            @input="clearError"
          />
          
          <input 
            v-else 
            class="input" 
            type="text" 
            placeholder="请输入手机号" 
            v-model="phone"
            @input="validatePhone"
            maxlength="11"
          />
        </view>

        <view class="form-item">
          <input 
            class="input" 
            :type="showPassword ? 'text' : 'password'" 
            placeholder="请输入密码" 
            v-model="password"
            @input="clearError"
          />
          <text class="eye-icon" @click="togglePassword">👁️</text>
        </view>

        <text class="error-msg">{{ errorMessage }}</text>

        <button 
          class="submit-btn" 
          form-type="submit" 
          :disabled="isSubmitting"
          :loading="isSubmitting"
        >
          立即登录
        </button>
      </form>

      <view class="links">
        <text @click="gotoForget">忘记密码</text>
        <text @click="gotoRegister">立即注册</text>
      </view>
    </view>
  </view>
</template>


<script>
export default {
  data() {
    return {
      loginType: 'username', // 当前登录方式: 'username' 或 'phone'
      username: '',
      phone: '',
      password: '',
      showPassword: false,
      isSubmitting: false,
      errorMessage: ''
    };
  },
  methods: {
    async formSubmit(e) {
      if (this.isSubmitting) return;

      // 校验用户名/手机号和密码
      if (this.loginType === 'username' && !this.username.trim()) {
        this.errorMessage = '用户名不能为空';
        return;
      }
      if (this.loginType === 'phone' && !this.validatePhoneInput(this.phone)) {
        this.errorMessage = '请输入有效的11位手机号';
        return;
      }
      if (!this.password.trim()) {
        this.errorMessage = '密码不能为空';
        return;
      }

      this.isSubmitting = true;

      try {
        const requestData = this.loginType === 'username' 
          ? { userZhanghao: this.username.trim(), userPassword: this.password.trim() } 
          : { userPhone: this.phone.trim(), userPassword: this.password.trim() };

        const response = await uni.request({
          url: 'http://localhost:8083/api/user/login',
          method: 'POST',
          data: requestData,
          header: { 'Content-Type': 'application/json' },
        });

        if (response.data.code === 1) {
          const token = response.data.data;
          uni.showToast({ title: '登录成功' });
          uni.setStorageSync('token', token);
          uni.reLaunch({ url: '/pages/home/home' });
        } else {
          this.errorMessage = response.data.msg || '用户名或密码错误';
        }
      } catch (error) {
        console.error('登录失败:', error);
        this.errorMessage = '登录失败，请稍后再试';
      } finally {
        this.isSubmitting = false;
      }
    },

    togglePassword() {
      this.showPassword = !this.showPassword;
    },

    clearError() {
      this.errorMessage = '';
    },

    validatePhone() {
      if (!this.validatePhoneInput(this.phone)) {
        this.errorMessage = '请输入有效的11位手机号';
      } else {
        this.errorMessage = '';
      }
    },

    validatePhoneInput(phone) {
      return /^\d{11}$/.test(phone);
    },

    gotoForget() {
      uni.navigateTo({ url: '/pages/forget/forget' });
    },

    gotoRegister() {
      uni.navigateTo({ url: '/pages/register/register' });
    }
  }
};
</script>


<style lang="scss" scoped>
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: #f5f7fa;
}

.login-box {
  width: 85%;
  padding: 40rpx;
  background: #fff;
  border-radius: 16rpx;
  box-shadow: 0 10rpx 30rpx rgba(0,0,0,0.1);

  .title {
    display: block;
    text-align: center;
    font-size: 36rpx;
    color: #303133;
    margin-bottom: 60rpx;
  }
}

.form-item {
  position: relative;
  margin-bottom: 40rpx;

  .input {
    height: 88rpx;
    padding: 0 30rpx;
    border: 2rpx solid #dcdfe6;
    border-radius: 8rpx;
    font-size: 28rpx;

    &:focus {
      border-color: #409eff;
    }
  }

  .eye-icon {
    position: absolute;
    right: 30rpx;
    top: 50%;
    transform: translateY(-50%);
    font-size: 34rpx;
  }
}

.error-msg {
  display: block;
  color: #f56c6c;
  font-size: 24rpx;
  margin-bottom: 20rpx;
  min-height: 40rpx;
}

.submit-btn {
  height: 88rpx;
  line-height: 88rpx;
  font-size: 32rpx;
  background: #409eff;
  color: #fff;
  border-radius: 8rpx;

  &[disabled] {
    background: #a0cfff;
  }
}

.links {
  display: flex;
  justify-content: space-between;
  margin-top: 40rpx;
  font-size: 26rpx;
  color: #606266;

  text {
    &:active {
      color: #409eff;
    }
  }
}
.switch-box {
  display: flex;
  justify-content: center;
  margin-bottom: 40rpx;

  .switch-item {
    padding: 10rpx 30rpx;
    font-size: 28rpx;
    color: #606266;
    cursor: pointer;

    &.active {
      color: #409eff;
      font-weight: bold;
      border-bottom: 4rpx solid #409eff;
    }
  }
}

</style>